<!DOCTYPE html>
<html>
	<head>
		<title>角色列表</title>
		
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		
		<link rel="stylesheet" type="text/css" media="screen" href="../js/jQuery/ui-1.8.16/css/redmond/jquery-ui-1.8.16.custom.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="../js/jqGrid-4.3.0/css/ui.jqgrid.css" />
		<link rel="stylesheet" type="text/css" media="screen" href="../js/jqGrid-4.3.0/css/ui.multiselect.css" />
		
		<script type="text/javascript" src="../js/jQuery/jquery-1.5.2.min.js"></script>
		<script type="text/javascript" src="../js/jQuery/ui-1.8.16/js/jquery-ui-1.8.16.custom.min.js"></script>
		
		<script type="text/javascript" src="../js/jqGrid-4.3.0/js/i18n/grid.locale-cn.js" ></script>
		<script type="text/javascript" src="../js/jqGrid-4.3.0/js/ui.multiselect.js"></script>
		<script type="text/javascript" src="../js/jqGrid-4.3.0/js/jquery.jqGrid.min.js" ></script>
		<script type="text/javascript" src="../js/jqGrid-4.3.0/js/jquery.tablednd.js"></script>
		
		<style type="text/css">
			html, body {
				width:		100%;
				height:		100%;					
				padding:	0;
				margin:		0;
				overflow:	auto; /* when page gets too small */
				font-size: 12px;
			}
		</style>
		
		<script type="text/javascript">
			var $j = jQuery.noConflict();
			$j(function() {
				$j("#dialog").dialog({
					autoOpen: false,
					width: 400,
					modal: true,
					buttons: {
						'保存': function() {
							$j( this ).dialog( "close" );
						},
						'取消': function() {
							$j( this ).dialog( "close" );
						}
					},
					close: function() {
					},
					open: function() {
					}
				});

				$j("#saveBtn").click(function() {
					var roleIdStr = $j("#roleId", "#dialog").val();
					var roleNameStr = $j("#roleName", "#dialog").val();
					var describleStr = $j("#describle", "#dialog").val();
					$j.post(
							"${ctx}/HTML/basic/RoleEditActionAjax.do?method=editRole",
							{roleId:roleIdStr,roleName:roleNameStr,describle:describleStr},
							function(data, textStatus) {
								var retObj = eval("(" + data + ")");
								if(retObj.result == 'success') {
									jQuery("#list").trigger("reloadGrid");
								}
								else if(retObj.result == 'error') {
									alert(retObj.info);
								}
							}
					);
					$j('#dialog').dialog('close');
				});		

				$j("#delBtn").click(function() {
					if(!confirm("确定删除角色：" + $j("#roleId", "#dialog").val() + "?"))
						return;
					$j.post("${ctx}/HTML/basic/RoleEditActionAjax.do?method=deleteRoleAjax",
							{roleId:$j("#roleId").val()},
							function(data, textStatus) {
								var retObj = eval("(" + data + ")");
								if(retObj.result == 'success') {
									$j('#dialog').dialog('close');
									jQuery("#list").trigger("reloadGrid");
								}
								else if(retObj.result == 'error') {
									alert(retObj.info);
								}
							}
					);
				});
			});	

			function showRoleInfo(roleId) {
				$j.get("${ctx}/HTML/basic/RoleEditActionAjax.do?method=showRoleInfo",
						{roleId:roleId},
						function(data, textStatus) {
							var retObj = eval("(" + data + ")");
							if(retObj.result == 'error') {
								alert("查询错误！" + retObj.info);
							}
							else if(retObj.result == 'success') {
								var consObj = eval("(" + retObj.info + ")");
								for(p in consObj) {
									try {
										$j("#" + p, "#dialog").val(consObj[p]);
									}
									catch (e) {
									}
								}
								$j('#dialog').dialog('open');
							}
						}
				);
			}
		</script>
	</head>
	<body>
		<table height="1%"><tr><td height="2"></td></tr></table>
		<table id="" cellSpacing="0" cellPadding="0" width="99%" height="98%" align="center" class="table" >
			<tr height="100%">
				<td valign="top">
					<table id="list" class="scroll" style="text-align:center;"></table>
					<div id="pager" class="scroll" style="text-align: center"></div>
				</td>
			</tr>
		</table>
		
		<div id="dialog" title="角色信息修改">
			<form>
				<table width="100%">
					<tr>
						<td class="td2" width="30%" align="right">角色名称：</td>
						<td class="text2" width="70%">
							<input type="hidden" id="roleId" name="roleId">
							<input type="text" id="roleName" name="roleName" style="width: 90%">
						</td>
					</tr>
					<tr>	
						<td class="td2" align="right">描述：</td>
						<td class="text2">
							<input type="text" id="describle" name="describle" style="width: 90%">
						</td>
					</tr>
				</table>
			</form>
		</div>
		
		<script type="text/javascript">
			jQuery("#list").jqGrid({
				url:'../basic/UserController/searchUser.action',
				datatype: 'json',
				jsonReader: {
					root: "rows",
					page: "page",
					total: "total",
					records: "records",
					repeatitems:false,
					id:"userId"
				},
				mtype:'post',
				colNames:['角色名称', '描述'],
				colModel: [
					{name:'userId',index:'userId', width:55},
					{name:'userName',index:'userName', width:90}
				],
				
				pager:jQuery("#pager"),
				sortname:'roleName',
				sortorder:'asc',
				viewrecords:true,
				hiddengrid:false,
				loadonce:false,
				loadtext:'正在加载数据...',
				height:350,
				width:800,
				multiselect:false,
				toolbar:[false,"top"],
				imgpath:'${ctx}/HTML/jquerygrid/themes/basic/images',
				caption:'系统管理 >> 角色管理',
				loadComplete:function() {
					
				},
				ondblClickRow:function(rowId) {
					showRoleInfo(rowId);
				}
			});

			jQuery("#list").navGrid('#pager', {
					edit:false,add:false,del:false,search:true
				}).navButtonAdd('#pager', {caption:'新增', position:'last', onClickButton: function() {
					$j('#dialog').dialog('open');
					$j("input:text", "#dialog").val("");
					$j("input:hidden", "#dialog").val("");
			}}).navButtonAdd('#pager', {caption:'excel', position:'last', onClickButton: function() {
					exportToExcel($j("#list"));
			}});
			jQuery("#list").jqGrid('gridResize',{minWidth:150,maxWidth:window.screen.width,minHeight:150, maxHeight:window.screen.height});
		</script>
	</body>
</html>